<template>
  <div>
    <p style="margin-bottom: 16px;color: #bbbec4;">温馨提示：点击蓝色按钮可修改邮费，点击红色叉可删除</p>
    <ul v-show="initData[0]" class="show">
      <li>
        小于
        <Button type="primary" size="small" @click="setNowData(0, profitPrice[0])">{{profitPrice[0]}}￥</Button>
        <span style="margin-left: 16px;">邮费</span>
        <span style="color: #ed3f14;">{{postagePrice[0]}}￥</span>
        <span class="update" @click="updatePostage(0)"><Icon type="edit"></Icon>修改邮费</span>
      </li>
      <li v-for="(price, index) in profitPrice" :key="index" v-if="index < profitPrice.length - 1" class="center_li">
        <Tag :fade="false">{{price}}￥</Tag>~
        <Button size="small" type="primary" @click="setNowData(index + 1, profitPrice[index + 1])">{{profitPrice[index + 1]}}￥</Button>
        <span style="margin-left: 16px;">邮费</span>
        <span style="color: #ed3f14;">{{postagePrice[index + 1]}}￥</span>
        <span class="update" @click="updatePostage(index + 1)"><Icon type="edit"></Icon>修改邮费</span>
        <span class="del" @click="delInterval(index)"><Icon type="close-round"></Icon></span>
      </li>
      <li v-else>
        大于
        <Button size="small" type="primary" @click="setNowData(profitPrice.length - 1, profitPrice[profitPrice.length - 1])">{{profitPrice[profitPrice.length - 1]}}￥</Button>
        <span style="margin-left: 16px;">邮费</span>
        <span style="color: #ed3f14;">{{lastValue}}￥</span>
        <span class="update" @click="updatePostage(profitPrice.length)"><Icon type="edit"></Icon>修改邮费</span>
      </li>
    </ul>
    <p v-show="!initData[0]">尚未设置过利润区间邮费，请点击添加按钮添加</p>
    <div>
      <Button type="primary" @click="showInput = true">添加</Button>
      <div v-show="showInput">
        <span>新增利润区间：</span><InputNumber v-model="addPro" :min="profitPrice[profitPrice.length - 1] + 1"/>
        <span>邮费：</span><InputNumber v-model="addPostage" :min="0"/>
        <Button @click="addSub" type="primary">确认</Button>
      </div>
    </div>
    <Modal v-model="showPro" title="修改区间" @on-ok="subSetPro">
      <span>输入利润：</span>
      <InputNumber v-model="nowPro" :min="0" :max="profitPrice[this.nowIndex + 1] ? profitPrice[this.nowIndex + 1] - 1 : 1000000"/>
    </Modal>
    <Modal v-model="showUpdate" title="修改邮费" @on-ok="subUpdate">
      <span>输入邮费：</span>
      <InputNumber v-model="updatePost"/>
    </Modal>
  </div>
</template>

<script>
export default {
  name: 'profit-postage',
  data () {
    return {
      url: {
        list: '/branch/profit/postage/setting/list',
        add: '/branch/profit/postage/setting/add',
        update: '/branch/profit/postage/setting/update'
      },
      profitPrice: [],
      postagePrice: [],
      lastValue: null,
      showInput: false,
      initData: [],

      showPro: false,
      nowPro: null,
      nowIndex: null,

      addPro: null,
      addPostage: null,

      updatePost: null,
      showUpdate: false
    }
  },
  methods: {
    setNowData (index, pro) {
      this.nowIndex = index
      this.nowPro = pro
      this.showPro = true
    },

    addSub () {
      console.log(this.postagePrice, this.profitPrice)
      let postage = this.postagePrice.map(item => {
        return item * 100
      })
      let interval = this.profitPrice.map(item => {
        return item * 100
      })
      console.log(postage, interval)
      postage.push(this.lastValue ? this.lastValue * 100 : 100 * 100)
      interval.push(this.addPro * 100)
      let params = {
        interval,
        postage,
        maxLimit: this.addPostage * 100
      }
      this.$ajax.post(this.url.add, params)
        .then(res => {
          if (res.data.success) {
            this.initList()
            this.$Message.success('更新成功')
          }
        })
    },
    delInterval (index) {
      this.$Modal.confirm({
        title: '删除区间',
        content: '你确定删除该区间吗？',
        onOk: () => {
          let postage = this.postagePrice.map(item => {
            return item * 100
          })
          let interval = this.profitPrice.map(item => {
            return item * 100
          })
          postage.splice(index + 1, 1)
          interval.splice(index + 1, 1)
          let params = {
            interval,
            postage,
            maxLimit: this.lastValue * 100
          }
          this.$ajax.post(this.url.add, params)
            .then(res => {
              if (res.data.success) {
                this.initList()
                this.$Message.success('更新成功')
              }
            })
        }
      })
    },
    subSetPro () {
      /*
      * 提交修改区间
      * */
      if (this.nowPro !== this.profitPrice[this.nowIndex]) {
        let interval = this.profitPrice.map(item => {
          return item * 100
        })
        interval[this.nowIndex] = this.nowPro * 100
        let postage = this.postagePrice.map(item => {
          return item * 100
        })
        let params = {
          interval,
          postage,
          maxLimit: this.lastValue * 100
        }
        this.$ajax.post(this.url.add, params)
          .then(res => {
            if (res.data.success) {
              this.initList()
              this.$Message.success('更新成功')
            }
          })
      }
    },

    updatePostage (index) {
      this.nowIndex = index
      this.showUpdate = true
      console.log(this.postagePrice, index)
      if (index === this.postagePrice.length) {
        this.updatePost = this.lastValue
      } else {
        this.updatePost = this.postagePrice[index]
      }
    },
    subUpdate () {
      if (this.updatePost !== this.postagePrice[this.nowIndex]) {
        let params = {
          intervalId: this.initData[this.nowIndex].id,
          postage: this.updatePost * 100
        }
        this.$ajax.post(this.url.update, params)
          .then(res => {
            if (res.data.success) {
              this.initList()
              this.$Message.success('更新成功')
            }
          })
      }
    },

    initList () {
      this.showInput = false
      this.profitPrice = []
      this.postagePrice = []
      this.$ajax.post(this.url.list).then(res => {
        this.initData = JSON.parse(JSON.stringify(res.data.data))
        if (res.data.data[0]) {
          this.lastValue = res.data.data.splice(res.data.data.length - 1, 1)[0].postage / 100
          res.data.data.forEach(item => {
            this.profitPrice.push(item.endProfitInterval / 100)
            this.postagePrice.push(item.postage / 100)
          })
        }
      })
    }
  },
  created () {
    this.initList()
  }
}
</script>

<style scoped>
.price li{
  margin-bottom: 16px;
}
  .none{
    display: none;
  }
.price li:hover .none{
  display: inline-block;
}
  .show li{
    height: 35px;
  }
  .del{
    display: none;
    margin-bottom: 20px;
    color: #ed3f14;
    cursor: pointer;
  }
  .center_li:hover .del{
    display: inline-block;
  }
  .update{
    cursor: pointer;
    color: #2d8cf0;
    display: none;
  }
  .show li:hover .update{
    display: inline-block;
  }
</style>
